<template>
  <div class="profile-box">
    <div style="margin: 0 10px 0 10px">
      <!-- 头像圆 -->
      <div class="tx"></div>
      <van-icon class="sc" name="star-o" size="30" color="yellow" /><span
        style="font-size: 18px; color: white"
        >点击收藏</span
      >
      <!-- 医院 等级：三甲 -->
      <div style="text-align: center; font-size: 20px">
        <p style="color: white">西南医院江北医院(陆军第九五八医院)</p>
        <van-tag
          type="warning"
          size="large"
          style="font-size: 15px; padding: 5px; margin: 5px 0px"
          >三甲</van-tag
        >
      </div>
      <!-- 简介 -->
      <div
        style="
          width: 343px;
          border: 1px solid slategray;
          border-radius: 10px;
          color: blanchedalmond;
          padding: 5px;
        "
      >
        <div
          style="
            /* 换行 */
            white-space: wrap;
            display: -webkit-box;
            /* 三行 */
            -webkit-line-clamp: 3;
            /* 多出部分省略号 */
            text-overflow: ellipsis;
            /* 文本垂直排列 */
            -webkit-box-orient: vertical;
            overflow: hidden;
          "
        >
          <van-icon name="medal-o" />
          <span>
            <a
              style="color: white"
              href="https://m.bohe.cn/yyk/hospital_33127/yyjs.html"
              >简介:西南医院江北院区（陆军第九五八医院）1968年10月组建于重庆南温泉，1978年整体搬迁至现驻地江北区建新东路29号，是一所集医疗、教学、科研于一体的大型综合性三级甲等医院，拥有价值约2亿元的国内外高新设备。2018年9月转隶陆军军医大学，由西南医院领导管理。2019年9月挂牌西南医院江北院区。转隶以来，按照与西南医院同质化管理，特色化发展的方针，西南医院派驻多名专家任江北院区执行主任，并多次开展联合大型义诊活动，定期开设多个学科专家门诊，组织多批次学术讲座和教学查房等。医院现有科室39个，实开床位900余张，医疗用房9万余平方米，医务人员1000余人，硕士生导师2名、博士后1名、博士38名、硕士61名。</a
            >
          </span>
        </div>
        <!-- 地址 -->
        <hr />
        <div
          style="font-size: 15px; display: flex; justify-content: space-between"
        >
          <span>重庆市渝北区xxxxxx</span>
          <van-icon name="phone" size="20" />
        </div>
      </div>

      <!-- 简介完 -->
      <!-- 体检分类 -->
      <div
        style="
          border: 1px solid white;
          margin-top: 10px;
          border-radius: 10px;
          background-color: white;
        "
      >
        <p style="margin: 15px 0 0 10px; font-size: 20px; font-weight: bold">
          体检分类
        </p>
        <div
          style="
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            margin-top: 15px;
            margin-bottom: 15px;
          "
        >
          <div class="tj">
            <i class="iconfont icon-zhishi"> <p>入职体检</p></i>
          </div>
          <div class="tj">
            <i class="iconfont icon-zhishi"> <p>入职体检</p></i>
          </div>
          <div class="tj">
            <i class="iconfont icon-zhishi"><p>入职体检</p></i>
          </div>
          <div class="tj">
            <i class="iconfont icon-zhishi"><p>入职体检</p></i>
          </div>
        </div>
      </div>
      <!-- 页脚 -->
      <div style="line-height: 70px; padding: 0 80px">
        <van-icon name="shield-o" size="30" />
        <i style="font-weight: bold">全民医保！就是好!!</i>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.tj {
  width: 90px;
  height: 90px;
  background-color: rgb(245, 248, 255);
  display: flex;
  justify-content: space-evenly;
  text-align: center;
}
.tj:nth-child(4) {
  margin-top: 15px;
}
.tx {
  width: 50px;
  height: 50px;
  border: 1px solid white;
  border-radius: 50px;
  margin-left: 160px;
  background-color: white;
}
.sc {
  margin-left: 130px;
  margin-top: 10px;
}
.profile-box {
  padding-top: 30px;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #0c3662 0%, #dee3eb 100%);
}
</style>
